<template>
  <div class="content-info">
        <ul class="con-title">
        	  <li class="tab-title" v-for="item of titleList" :key="item.id">{{ item.titlename }}</li>
        </ul>

        <ul class="con-table" v-for="item of tableList">
        	 <li class="tab-border" v-for="item of borderList"></li>
        </ul>  
        
        <div class="con-data-wrapper">
	        <ul class="con-data" v-for="item of list" :key="item.id">
	             <li class="tab-content">{{item.knifeNum}}</li>
	             <li class="tab-content">{{item.monocrystalNum}}</li>
	             <li class="tab-content">{{item.theoryNum}}</li>
	             <li class="tab-content">{{item.realityNum}}</li>
	             <li class="tab-content">{{item.damageNum}}</li>
	             <li class="tab-content">{{item.loadMatTime}}</li>
	        </ul>
        </div>
    
  </div>
</template>

<script>
export default {
  props:{
    list:Array
  },	
  data () {
    return {
    	  titleList:[
    	     {
    	     	id:"0001",
    	     	titlename:"刀号"
    	     },
    	     {
    	     	id:"0002",
    	     	titlename:"单晶编号"
    	     },
    	     {
    	     	id:"0003",
    	     	titlename:"理论出片数"
    	     },
    	     {
    	     	id:"0004",
    	     	titlename:"实际插片数"
    	     },
    	     {
    	     	id:"0005",
    	     	titlename:"自损数量"
    	     },
    	     {
    	     	id:"0006",
    	     	titlename:"上料时间"
    	     }
    	     
    	  ],
    	  borderList:["1","2","3","4","5","6"],
    	  tableList:["1","2","3","4","5","6"]
    	  // list:[
       //      {
       //      	id:"000001",
       //      	machine:"33sss",
       //      	time:"2018/0607",
       //          person:"ssssddc",
       //          workstep:"上料",
       //          abnormalinfo:"xxxx"
       //      }

    	  // ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content-info{
	width:1000px;
	margin:0 auto;
	height:350px;
	position:relative;
}
	
.content-info .con-title{
	height:50px;
	border:1px solid #fff;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
		
.content-info .con-title .tab-title{
	width:25%;
	height:50px;
	line-height:50px;
	text-align:center;
	border-right:1px solid #fff;
	box-sizing:border-box;
}
	
.content-info .con-title .tab-title:nth-child(n+3){
	width:12%;
}
.content-info .con-title .tab-title:last-child{
	border:none;
	width:14%;
}
			
.con-table{
	width: 100%;
	height:50px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.con-table li{
	height:50px;
	line-height:50px;
	width: 25%;
	border-right: 1px solid #fff;
	box-sizing:border-box;
	text-align:center;
}	
.con-table	li:nth-child(n+3){
	width: 12%;
}
.con-table	li:last-child{
	width:14%;
	border:none;
}
.con-table:nth-child(7){
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}


.tab-title{
	font-size:22px;
	color:#fff;
}
	
.tab-content{
	font-size:22px;
	color:#fff;
}
.con-data-wrapper{
	width:100%;
	height:300px;
	overflow:hidden;
	position:absolute;
	top:50px;
}
.con-data-wrapper .con-data{
	width:100%;
	height:50px;
	borx-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.con-data-wrapper .con-data li{
	height: 50px;
	line-height:50px;
	width: 25%;
	box-sizing:border-box;
	text-align:center;
}		
.con-data-wrapper .con-data li:nth-child(n+3){
	width: 12%;
}
.con-data-wrapper .con-data li:last-child{
	width:14%;		
}
</style>